import { View, Text, Swiper, SwiperItem, Image } from "@tarojs/components";
//导入生命周期钩子，onLoad, onReady, onShow, onHide, onUnload
import Taro, { useLoad } from "@tarojs/taro";
import "./index.scss";
import { useState } from "react";
import Navbar from "../../components/nav-bar";
import { getBannerPics, getHospitalInfo } from "../../api";

export default function Index() {
  console.log("Index");
  const [swiperComponentList, setSwiperComponentList] = useState([]);
  const [nav2s, setNav2s] = useState([]);
  const [navs, setNavs] = useState([]);
  const [hospitalLists, setHospitalLists] = useState([]);
  useLoad(async (options) => {
    const retData = await getBannerPics();
    const { id } = retData.data.area;
    const retData2 = await getHospitalInfo(id);
    console.log("retData", retData2);
    setSwiperComponentList(retData2.data.slides);
    Taro.setStorageSync("cfg", JSON.stringify(retData.data.cfg));
    setNav2s(retData2.data.nav2s);
    setNavs(retData2.data.navs);
    setHospitalLists(retData2.data.hospitals);
  });

  const handleJumpToDetail = (e) => {
    const { stypeLink, stype } = e.currentTarget.dataset;
    // 判断是不是内部链接
    if (stype == "1") {
      Taro.navigateTo({
        url: stypeLink + "&stype=" + stype,
      });
    }
  };
  const handleJumpToHosDetail = (e) => {
    const { item } = e.currentTarget.dataset;

    console.log("item", item);
    Taro.navigateTo({
      url: "/pages/hospital/index?hid=" + item.id,
    });
  };
  return (
    <View className="index">
      <Navbar />
      <Swiper
        className="swiper-container"
        indicatorColor="#999"
        indicatorActiveColor="#333"
        circular
        indicatorDots
        autoplay
      >
        {swiperComponentList.map((item) => (
          <SwiperItem key={item.id}>
            <Image mode="" className="slide-image" src={item.pic_image_url} />
          </SwiperItem>
        ))}
      </Swiper>
      <view className="quick-enter">
        {nav2s.map((item) => (
          <view
            key={item.id}
            data-index={item.id}
            data-stype={item.stype}
            data-stypeLink={item.stype_link}
            className="quick-enter-image"
            onClick={handleJumpToDetail}
          >
            <Image mode="widthFix" src={item.pic_image_url} />
          </view>
        ))}
      </view>

      <view className="quick-enter_four">
        {navs.map((item, index) => (
          <view className="nav-item" key={index}>
            <image
              src={item.pic_image_url}
              mode="widthFix"
              data-index={item.id}
              data-stype={item.stype}
              data-stypeLink={item.stype_link}
              onClick={handleJumpToDetail}
            ></image>
            <view className="nav_title">
              <text>{item.title}</text>
            </view>
          </view>
        ))}
      </view>

      <view class="hospital-lists">
        {hospitalLists.length > 0 &&
          hospitalLists.map((item, index) => (
            <view
              className="hospital-lists_item"
              key={item.id}
              data-item={item}
              onClick={handleJumpToHosDetail}
            >
              <view className="item-left">
                <image
                  src={item.avatar_url || "../../static/log.png"}
                  mode="aspectFill"
                ></image>
              </view>
              <view className="item-right">
                <view className="item-right_title">
                  <text>{item.name}</text>
                </view>
                <view className="item-right_brand">
                  <text>{item.rank}</text>
                  <text>{item.label}</text>
                </view>
                <view className="item-right_desc">
                  <text>{item.intro}</text>
                </view>
              </view>
            </view>
          ))}
      </view>
    </View>
  );
}
